<template>
	<view class="spread flex justify-center" :class="{'box-spread': showFlag}">
		<view class="flex flex-col" style="gap: 30rpx;">
			<view class="flex items-center" style="gap: 30rpx;">
				<text class="spread13-label">初月</text>
				<view class="spread-item flex flex-col items-center">
					<text class="spread-up"> 1 </text>
					<template v-if="isAch == 1">
						<image :src="cardList[0].tarot.front" mode="widthFix" v-if="cardList[0].dir == 0"></image>
						<image :src="cardList[0].tarot.back" mode="widthFix" v-else></image>
					</template>
					<template v-else>
						<image src="@/static/tarot-bg.png" mode="widthFix"></image>
						<text class="spread-name">自身</text>
					</template>
					<text class="spread-label flex justify-center">状态</text>
				</view>
				<view class="spread-item flex flex-col items-center">
					<text class="spread-up"> 2 </text>
					<template v-if="isAch == 1">
						<image :src="cardList[1].tarot.front" mode="widthFix" v-if="cardList[1].dir == 0"></image>
						<image :src="cardList[1].tarot.back" mode="widthFix" v-else></image>
					</template>
					<template v-else>
						<image src="@/static/tarot-bg.png" mode="widthFix"></image>
						<text class="spread-name">相处</text>
					</template>
					<text class="spread-label flex justify-center">模式</text>
				</view>
				<view class="spread-item flex flex-col items-center">
					<text class="spread-up"> 3 </text>
					<template v-if="isAch == 1">
						<image :src="cardList[2].tarot.front" mode="widthFix" v-if="cardList[2].dir == 0"></image>
						<image :src="cardList[2].tarot.back" mode="widthFix" v-else></image>
					</template>
					<template v-else>
						<image src="@/static/tarot-bg.png" mode="widthFix"></image>
						<text class="spread-name">对方</text>
					</template>
					<text class="spread-label flex justify-center">状态</text>
				</view>
				<text class="spread13-label">开始阶段</text>
			</view>
			<view class="flex items-center" style="gap: 30rpx;">
				<text class="spread13-label">次月</text>
				<view class="spread-item flex flex-col items-center">
					<text class="spread-up"> 4 </text>
					<template v-if="isAch == 1">
						<image :src="cardList[3].tarot.front" mode="widthFix" v-if="cardList[3].dir == 0"></image>
						<image :src="cardList[3].tarot.back" mode="widthFix" v-else></image>
					</template>
					<template v-else>
						<image src="@/static/tarot-bg.png" mode="widthFix"></image>
						<text class="spread-name">自身</text>
					</template>
					<text class="spread-label flex justify-center">状态</text>
				</view>
				<view class="spread-item flex flex-col items-center">
					<text class="spread-up"> 5 </text>
					<template v-if="isAch == 1">
						<image :src="cardList[4].tarot.front" mode="widthFix" v-if="cardList[4].dir == 0"></image>
						<image :src="cardList[4].tarot.back" mode="widthFix" v-else></image>
					</template>
					<template v-else>
						<image src="@/static/tarot-bg.png" mode="widthFix"></image>
						<text class="spread-name">相处</text>
					</template>
					<text class="spread-label flex justify-center">模式</text>
				</view>
				<view class="spread-item flex flex-col items-center">
					<text class="spread-up"> 6 </text>
					<template v-if="isAch == 1">
						<image :src="cardList[5].tarot.front" mode="widthFix" v-if="cardList[5].dir == 0"></image>
						<image :src="cardList[5].tarot.back" mode="widthFix" v-else></image>
					</template>
					<template v-else>
						<image src="@/static/tarot-bg.png" mode="widthFix"></image>
						<text class="spread-name">对方</text>
					</template>
					<text class="spread-label flex justify-center">状态</text>
				</view>
				<text class="spread13-label">中期阶段</text>
			</view>
			<view class="flex items-center" style="gap: 30rpx;">
				<text class="spread13-label">三月</text>
				<view class="spread-item flex flex-col items-center">
					<text class="spread-up"> 7 </text>
					<template v-if="isAch == 1">
						<image :src="cardList[6].tarot.front" mode="widthFix" v-if="cardList[6].dir == 0"></image>
						<image :src="cardList[6].tarot.back" mode="widthFix" v-else></image>
					</template>
					<template v-else>
						<image src="@/static/tarot-bg.png" mode="widthFix"></image>
						<text class="spread-name">自身</text>
					</template>
					<text class="spread-label flex justify-center">状态</text>
				</view>
				<view class="spread-item flex flex-col items-center">
					<text class="spread-up"> 8 </text>
					<template v-if="isAch == 1">
						<image :src="cardList[7].tarot.front" mode="widthFix" v-if="cardList[7].dir == 0"></image>
						<image :src="cardList[7].tarot.back" mode="widthFix" v-else></image>
					</template>
					<template v-else>
						<image src="@/static/tarot-bg.png" mode="widthFix"></image>
						<text class="spread-name">相处</text>
					</template>
					<text class="spread-label flex justify-center">模式</text>
				</view>
				<view class="spread-item flex flex-col items-center">
					<text class="spread-up"> 9 </text>
					<template v-if="isAch == 1">
						<image :src="cardList[8].tarot.front" mode="widthFix" v-if="cardList[8].dir == 0"></image>
						<image :src="cardList[8].tarot.back" mode="widthFix" v-else></image>
					</template>
					<template v-else>
						<image src="@/static/tarot-bg.png" mode="widthFix"></image>
						<text class="spread-name">对方</text>
					</template>
					<text class="spread-label flex justify-center">状态</text>
				</view>
				<text class="spread13-label">结尾阶段</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		onMounted,
	} from 'vue';
	const cardList = inject('cardList')
	const showFlag = inject('showFlag')
	const isAch = ref(0)
	isAch.value = uni.getStorageSync('user').ach
</script>

<style>
	@import "./spread.css";

	.spread {
		padding: 40rpx 0;
		height: auto;
	}

	.spread13-label {
		font-size: 32rpx;
		font-weight: bold;
	}

	.spread-item {
		position: relative;
	}
</style>